HTML有序列表+无序列表+定义列表 |
您所在的位置：网站首页 › list 定义 › HTML有序列表+无序列表+定义列表 |
HTML有序列表+无序列表+定义列表
首页 > HTML
阅读：10,934
HTML有序列表+无序列表+定义列表
在网站开发过程中，我们经常会使用到列表（list）。列表可以将若干条相关的内容进行整理，让内容看起来更加有条理。例如，C语言中文网首页的「推荐阅读」、「精品教程」以及「最近更新」中的内容都使用了列表进行排列。接下来咱们看一下列表的具体使用方法。
HTML 为我们提供了 3 种不同的列表：
有序列表
无序列表
定义列表
1. 有序列表
在 HTML 中， 标签用来表示有序列表。有序列表之间的内容有先后顺序之分，例如菜谱中的一系列步骤，这些步骤需要按顺序完成，这时就可以使用有序列表。
我们来看一个简单的实例：
HTML有序列表
先将水煮沸
加入一勺米
搅拌均匀
在浏览器中运行效果如图所示：
图1：HTML 有序列表
上述代码中使用了 、 标签，接下来我们来分别看一下这两个标签：
是 order list 的简称，表示有序列表。它可以为列表的每一项进行编号，默认从数字 1 开始；
是 list item 的简称，表示列表的每一项。列表中还可以包含文本或其它元素，甚至是新的列表。 中有多少个 就表示有多少条内容。
提示：在使用 时，它一般和 配合使用，不会单独出现。而且不建议在 中直接使用除 之外的其他标签。 2. 无序列表 在 HTML 中，我们使用 标签来表示无序列表。无序列表和有序列表类似，都是使用 标签来表示列表的每一项，但是无序列表之间的内容是没有顺序的。例如，早饭的种类不需要表明顺序，这时就可以使用无序列表。 实例： HTML无序列表 鸡蛋 牛奶 面包 浏览器运行结果如图所示：
表2：HTML 无序列表
上述代码中使用了 、 标签，那么我们来分别看一下这两个标签又是什么含义呢？
是 unordered list 的简称，表示无序列表。默认情况下，无序列表的每一项都使用●符号表示；
同 中的 一样，它也表示列表中的每一项。
提示： 一般和 配合使用，不会单独出现。而且不建议在 中直接使用除 之外的其他标签。 3. 定义列表 在 HTML 中， 标签用于创建定义列表。它是由定义标题和定义描述两部分组成的，而且至少要包含一条定义标题或定义描述。一般情况下，当要展示的列表形式包括标题和描述两部分时，使用定义列表再合适不过了。 具体语法格式如下：定义标题 定义描述 定义描述 定义描述 上述代码中使用了 、 及 标签，我们来分别看一下这三个标签： 是 definition list 的简称，表示定义列表； 是 definition term 的简称，表示定义术语，也就是我们常说的定义标题。一般情况下，每个定义标题都会对应若干条定义描述； 是 definition description 的简称，表示定义描述。定义描述一般是对定义标题的解释说明。请读者注意此处的 、 是同级标签，都是 的子标签。 具体使用场景如下示例： HTML定义列表 Web前端简介 HTML（超文本标记语言） CSS（层叠样式表） JavaScript（脚本语言） C语言中文网 HTML教程 CSS教程 JavaScript教程 浏览器运行效果如下图：
图3：定义列表
通过运行结果可以发现，、 标签的联系与区别：
都在浏览器中独占一行，属于块级元素；
充当了列表的标题，多个 之间可以没有关系；
一般情况下， 标签中间的内容是对 的描述。
提示： 一般与 或 配合使用，不会单独出现。不建议在 中直接使用除 、 之外的其他标签。 4. 总结 列表分类 说明 有序列表 表示有序列表， 表示列表中的每一项，默认使用阿拉伯数字编号。 无序列表 表示无序列表，配合 实现，默认使用●符号显示。 定义列表 与、 配合实现， 充当列表的标题， 是对 的解释说明。关注微信公众号「站长严长生」，在手机上阅读所有教程，随时随地都能学习。本公众号由C语言中文网站长运营，每日更新，坚持原创，敢说真话，凡事有态度。
|
微信扫描二维码关注公众号
【本文地址】